<?php
	$googleKey = "ABQIAAAAXO3kGojnOzps3MturbEb-xRsX8AU9oaVVrf0k2tus5sTAWBLwhSrvfg7pDtl1qcaoOCkTcc7sSOhSA";
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>TweenSheet, Démos</title>
		<link rel="stylesheet" type="text/css" media="all"  href="/css/default.css" />
		<script type="text/javascript" src="/js/before.js"></script>
	</head>
	<body class="dynBg">
		<ul class="wcag">
			<li><a href="#mainCtn" class="scrollToAnchor">Aller au contenu</a></li>
		</ul>
		<div id="header">
			<img src="/img/logo.png" lang="en" alt="TweenSheet, mass animation script" id="logo" class="dynBg"/>
			<ul id="tools">
				<li>
					<a href="/en/">English version</a>
				</li>
				<li>
					<a href="/cv/">Qui suis-je ?</a>
				</li>
				<li>
					<a href="/contact/">Me contacter</a>
					
				</li>
			</ul>
		</div>
		<div class="page" id="mainCtn">
			<h1 class="dynBg">TweenSheet, page de démos.</h1>
			<noscript><strong>Cette page nécéssite javascript pour tester TweenSheet, si vous ne pouvez pas utilisez cette technologie, cette page ne vous sera d'aucune utilité.</strong></noscript>
			<p>Utilisez le formulaire ci-dessous pour générer des blocs à animer.</p>
			<form action="#" onsubmit="generate();return false;">
				<label for="number">Saisissez un nombre de bloc à créer</label>
				<input type="text" id="number" value="20" />
				<input type="submit" value="Générer des blocs de test" />
			</form>
			<h2 class="dynBg">Zone de test...</h2>
			<div id="main">
				<div id="right" class="dynBg">
					<ul>
						<li><a href="#" onclick="new Fx.TweenSheet(options1b).tween('.test', 'background-color', '#4be827').tween('.test', 'border-color', '#ffa722');return false;">Je suis vert...</a></li>
						<li><a href="#" onclick="new Fx.TweenSheet(options1b).tween('.test', 'background-color', '#c71c1c');return false;">Ne rougis pas...</a></li>
						<li><a href="#" onclick="new Fx.TweenSheet(options1b).tween('.test', 'background-color', '#fff');return false;">T'es tout pâle...</a></li>
						<li><a href="#" onclick="new Fx.TweenSheet(options1).tweens('.test', {'width':'40', 'height':40});return false;">Je me sens tout petit...</a></li>
						<li><a href="#" onclick="new Fx.TweenSheet(options1).tweens('.test', {'width':'100', 'height':100});return false;">Je suis regonflé !</a></li>
						<li><a href="#" onclick="new Fx.TweenSheet(options6).tweens('.test', {'width':'720', 'height':720});return false;">Je suis gonflé à bloc !</a></li>
						<li><a href="#" onclick="new Fx.TweenSheet(options2).tween('.test', 'transform', [0, 360]);return false;">A droite toute !</a></li>
						<li><a href="#" onclick="new Fx.TweenSheet(options2).tween('.test', 'transform', [0, 180]);return false;">Fais le poirier !</a></li>
						<li><a href="#" onclick="new Fx.TweenSheet(options2).tween('.test', 'transform', [180,0]);return false;">Debout !</a></li>
						<li><a href="#" onclick="new Fx.TweenSheet(options7).tween('.test', 'transform', [0, 45]);return false;">T'es vraiment tordu !</a></li>
						<li><a href="#" onclick="new Fx.TweenSheet(options7).tween('.test', 'transform', [45,0]);return false;">Redresse-toi !</a></li>
						<li><a href="#" onclick="new Fx.TweenSheet(options3).tween('.test', 'box-shadow', [3, 20]);return false;">Marche à l'ombre !</a></li>
						<li><a href="#" onclick="new Fx.TweenSheet(options4).tween('.test', 'box-shadow', [20, 0]);return false;">Peter a perdu son ombre !</a></li>
						<li><a href="#" onclick="new Fx.TweenSheet(options5).tween('.test', 'border-radius', [0, 20]);return false;" title="Ne marche pas sur Internet Explorer 8 et moins">Arrondi les angles !</a></li>
						<li><a href="#" onclick="new Fx.TweenSheet(options5).tween('.test', 'border-radius', [20, 0]);return false;" title="Ne marche pas sur Internet Explorer 8 et moins">Soit carré un peu !</a></li>
						
						
					</ul>
				
				</div>
				<div id="ctn">[...]</div>
			</div>
			<h2 class="dynBg">A observer...</h2>
			<p>A l'utilisation, on s'aperçoit que les moteurs de rendu sont à la peine dès qu'il s'agit de:</p>
			<ul>
				<li>Redimensionner des images, surtout dans l'agrandissement</li>
				<li>Manipuler des propriétés CSS gourmande en traitement (notamment box-shadow)</li>
				<li>Faire un rendu sur énormément d'éléménts (sur mon ordi, au délà de 1000; ca commence à sérieusement lagger...)</li>
			</ul>
			<p>Mais déjà lancé une animation sur plusieurs dizaines d'éléments à la fois, je trouve ça pas mal !</p>
		</div>

		<script src="http://www.google.com/jsapi?key=<?php echo $googleKey;?>" type="text/javascript"></script>
		<script type="text/javascript">
			google.load("mootools", "1.2.4", {uncompressed:true});
			google.setOnLoadCallback(initialize);
			
			function generate(){
				var ctn = $("ctn");
				ctn.empty();
				var txt = new Array($('number').value.toInt() + 1).join("<div class='test'><span>#@</span><img src='/img/patata.png' style='display:block;'/></div>");
				var i = 0;
				ctn.innerHTML = txt.replace(/@/g, function (){
					i++;
					return i;
				});
			}
			
			function initialize(){
			options1 = {
				duration: 800,
			};
			options1b = {
				duration: 1200,
				transition: Fx.Transitions.Bounce.easeOut,
				link: "chain"
			};
			options2 = {
				prefix:true,
				pattern: "rotate(@deg)"
			};
			
			options3 = {
				prefix:true,
				pattern: "2px 2px @px #444"
			};
			
			options4 = {
				prefix:true,
				pattern: "1px 1px @px #444",
				onComplete: function (o){
					this.options.pattern = "0px 0px 0px #444";
					o.write("", o.datas);
				}
			};
			
			options5 = {
				prefix:true
			};
			
			options6 = {
				
			};
			
			options7 = {
				prefix:true,
				pattern: "skew(-@deg)"
			};
			
				new MooRainbow("couleur", {
					id: 'mooRainbow',
					wheel: true,
					imgPath: 'css/skin/',
					onChange: function(color) {
						new Fx.TweenSheet().tween(".dynBg", "background-color", color.hex);
					},
					onComplete: function(color) {
						new Fx.TweenSheet().tween(".dynBg", "background-color", color.hex);
					}
				});
				
			}
	
		</script>
		<script src="/js/Fx.TweenSheet.js" type="text/javascript"></script>
		<script src="/js/Drag.js" type="text/javascript"></script>
		<script src="/js/Color.js" type="text/javascript"></script>
		<script src="/js/MooRainbow.js" type="text/javascript"></script>
	</body>
</html>
